<template>
	<view>
		<custom-header :isBack="false" title="扫码配货" />
		<view class="screen_wrap">
			<view 
				class="sw_single"
				hover-class="custom_hover" 
				:hover-stay-time="200"
				@click="isShowSingle = true">
					<view class="text">
						{{ single || '按单品' }}
					</view>
					<view class="icon">
						<image src="/static/common/bottom1.png" mode=""></image>
					</view>
			</view>
			<view
				class="sw_single"
				hover-class="custom_hover" 
				:hover-stay-time="200"
				@click="isShowGoodsNumber = true">
					<view class="text">
						{{ goodsNumber || '货位号' }}
					</view>
					<view class="icon">
						<image src="/static/common/bottom1.png" mode=""></image>
					</view>
				</view>
			<view
				class="sw_single"
				hover-class="custom_hover" 
				:hover-stay-time="200"
				@click="isShowRuwei = true">
					<view class="text">
						{{ ruwei || '未入位' }}
					</view>
					<view class="icon">
						<image src="/static/common/bottom1.png" mode=""></image>
					</view>
			</view>
		</view>
		<scroll-view
			:scroll-y="true" 
			scroll-with-animation
			:style="{height:'calc(100vh - 128rpx - 100rpx - 5rpx - '+statusBarHeight+'px)'}"
			class="scroll_content_wrap">
				<view
					class="no_data" 
					v-if="!listData.length && listLoading != 'loading'">
						<view class="icon">
							<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nodata.png" mode=""></image>
						</view>
				</view>
				<view class="list_wrap" v-if="listData.length">
					<view class="list" v-for="(item,index) in listData" :key="index">
						<view class="check" v-if="false">
							<image src="/static/common/no_check.png" mode=""></image>
						</view>
						<view class="info_wrap">
							<view class="area_status">
								<view class="area">{{ item.areaCode }}</view>
								<view class="status green" v-if="item.status == 1">已入位</view>
								<view class="status red" v-if="item.status == 2">未入位</view>
							</view>
							<view class="name_count">
								<view class="name">
									<text>{{ item.name }}</text>
									<text class="grade">{{ item.grade }}</text>
									<text>{{ item.mature }}</text>
								</view>
								<view class="count">
									商品总数：<text style="color: #F5564D;">2扎</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 加载中 -->
				<view class="loading_wrap" v-if="listLoading == 'loading'">
					<up-loadmore
						:status="listLoading"
						iconSize="22"
						iconColor="#FF3316"
						loadingIcon='semicircle'
						loadingText=""
						/>
				</view>
		</scroll-view>
		<view class="footer_btn_wrap">
			<view class="btn_wrap">
				<button
					size="default" 
					type="default" 
					class="btn confirm" 
					hover-class="confirm_hover" 
					:hover-stay-time="200" 
					@click="handleScanCode">
					 <image src="/static/common/scan.png" style="width: 28rpx;height:28rpx;transform: translateY(2rpx);" mode=""></image>
					 <text style="padding-left: 10rpx;">扫一扫</text>
				</button>
			</view>
		</view>
		<!-- 自定义消息弹出层 -->
		<custom-popup
			:show="isShowToast" 
			:config="popupConfig"
			@confirm="isShowToast = false" />
		<!-- 按单品 -->
		<custom-select 
			:show="isShowSingle" 
			:datas="singleList" 
			@confirm="handleSingleConfirm"
			@close="isShowSingle = false" />
		<!-- 按货位号 -->
		<custom-select 
			:show="isShowGoodsNumber" 
			:datas="goodsNumberList" 
			@confirm="handleGoodsNumberConfirm"
			@close="isShowGoodsNumber = false" />
		<!-- 按是否入位 -->
		<custom-select 
			:show="isShowRuwei" 
			:datas="ruweiList" 
			@confirm="handleRuweiConfirm"
			@close="isShowRuwei = false" />
	</view>
</template>

<script setup>
	import { computed, ref , onMounted} from 'vue';
	import { useStore } from 'vuex';
	const store = useStore();
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight;
	});
	

	// 消息弹出层
	const isShowToast = ref(false)
	const popupConfig = ref({})
	
	// 获取列表数据
	const listLoading = ref('loadmore');
	const listData = ref([]);
	const loadGetListData = ()=>{
		listData.value = []
		listLoading.value = 'loading'
		setTimeout(()=>{
			listLoading.value = 'loadmore'
			listData.value = [
				{
					
					id:1, 
					areaCode:'八区-616',
					name:'卡罗拉',
					grade:'A级',
					mature:'中熟（3度）',
					status:1, // 1已入位 2未入位
 					count:9,
				},
				{
					
					id:1, 
					areaCode:'九区-886',
					name:'卡罗拉',
					grade:'B级',
					mature:'中熟（6度）',
					status:2, // 1已入位 2未入位
					count:9,
				},
				{
					
					id:1, 
					areaCode:'九区-886',
					name:'卡罗拉',
					grade:'B级',
					mature:'中熟（6度）',
					status:2, // 1已入位 2未入位
					count:9,
				},
				{
					
					id:1, 
					areaCode:'九区-886',
					name:'卡罗拉',
					grade:'B级',
					mature:'中熟（6度）',
					status:2, // 1已入位 2未入位
					count:9,
				},
				{
					
					id:1, 
					areaCode:'九区-886',
					name:'卡罗拉',
					grade:'B级',
					mature:'中熟（6度）',
					status:2, // 1已入位 2未入位
					count:9,
				},
				
				{
					
					id:1, 
					areaCode:'九区-886',
					name:'卡罗拉',
					grade:'B级',
					mature:'中熟（6度）',
					status:2, // 1已入位 2未入位
					count:9,
				},
				{
					
					id:1, 
					areaCode:'九区-886',
					name:'卡罗拉',
					grade:'B级',
					mature:'中熟（6度）',
					status:2, // 1已入位 2未入位
					count:9,
				},
				{
					
					id:1, 
					areaCode:'九区-886',
					name:'卡罗拉',
					grade:'B级',
					mature:'中熟（6度）',
					status:2, // 1已入位 2未入位
					count:9,
				},
				{
					
					id:1, 
					areaCode:'九区-886',
					name:'卡罗拉',
					grade:'B级',
					mature:'中熟（6度）',
					status:2, // 1已入位 2未入位
					count:9,
				},
			]
		},1000);
	};
	
	
	
	// 按单品筛选
	const single = ref('')
	const isShowSingle = ref(false)
	const singleList = ref(['卡罗拉','康乃馨','向日葵'])
	const handleSingleConfirm = (value)=>{
		single.value = value
		loadGetListData()
	}
	// 按货位号筛选
	const goodsNumber = ref('')
	const isShowGoodsNumber = ref(false)
	const goodsNumberList = ref(['1541','5412','45613'])
	const handleGoodsNumberConfirm = (value)=>{
		goodsNumber.value = value
		loadGetListData()
	}
	// 按是否入位筛选
	const ruwei = ref('未入位')
	const isShowRuwei = ref(false)
	const ruweiList = ref(['已入位','未入位'])
	const handleRuweiConfirm = (value)=>{
		ruwei.value = value
		loadGetListData()
	}
	
	
	// 调用扫一扫功能
	const handleScanCode = ()=>{
		uni.scanCode({
			success: (res) => {
				console.log(res)
			}	
		})
	}
	
	onMounted(()=>{
		loadGetListData()
	})

</script>

<style lang="scss">
	.screen_wrap{
		display: flex;
		height: 100rpx;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		.sw_single{
			width: 218rpx;
			height: 60rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			.text{
				color: #333333;
				font-size: 24rpx;
			}
			.icon{
				width: 20rpx;
				height: 10rpx;
				display: flex;
				margin-left: 10rpx;
			}
		}
	}
	.no_data{
		background: #fff;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: calc(100% - 40rpx);
		.icon{
			width: 280rpx;
			height: 322rpx;
		}
	}
	.list_wrap{
		padding: 0 20rpx 20rpx;
		.list{
			border-radius: 20rpx;
			background: #FFFFFF;
			padding: 30rpx 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			.check{
				width: 36rpx;
				height: 36rpx;
				margin: 0 20rpx;
			}
			.info_wrap{
				flex: 1;
				.area_status{
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #f0f0f0;
					padding-bottom: 20rpx;
					.area{
						font-size: 28rpx;
						color: #5786FF;
						font-weight: bold;
					}
					.status{
						font-size: 24rpx;
					}
				}
				.name_count{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-top: 20rpx;
					.name{
						font-size: 28rpx;
						font-weight: bold;
						color: #666;
						.grade{
							padding: 0 20rpx 0 5rpx;
							color: #F5564D;
						}
					}
					.count{
						font-size: 24rpx;
						color: #333333;
					}
				}
			}
		}
	}
</style>
